<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>管理员</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700" rel="stylesheet">
    <!-- Template Styles -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- CSS Reset -->
    <link rel="stylesheet" href="/static/css/normalize.css">
    <!-- Milligram CSS minified -->
    <link rel="stylesheet" href="/static/dist/milligram.min.css">
    <!-- Main Styles -->
    <link rel="stylesheet" href="/static/css/styles.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</head>

<body>
    <div class="navbar">
        <div class="row">
            <div class="column column-30 col-site-title">
                <a href="#" class="site-title float-left">后台管理</a>
            </div>
            <div class="column column-40 col-search">
                <a href="#" class="search-btn fa fa-search"></a>
                <input type="text" name="" value="" placeholder="Search..." />
            </div>
            <div class="column column-30">
                <div class="user-section">
                    <a href="#">
                        <img src="http://via.placeholder.com/50x50" alt="profile photo" class="circle float-left profile-photo" width="50" height="auto">
                        <div class="username">
                            <h4>{{.admin.Name}}</h4>
                            <p>
                                <a id="exit" href="/admin/op/exit.html">退出登录</a>
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="sidebar" class="column">
            <h5>Navigation</h5>
            <ul>
                <li>
                    <a href="#tables">
                        <em class="fa fa-table"></em> 总览</a>

                    <a type="" class="" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">
                        <em class="fa fa-table"></em>添加新的终端</a>

                </li>
            </ul>
        </div>
        <section id="main-content" class="column column-offset-20">

            <!--Tables-->
            <h5 class="mt-2">Tables</h5>
            <a class="anchor" name="tables"></a>
            <div class="row grid-responsive">
                <div class="column ">
                    <div class="card">
                        <div class="card-title">
                            <h3>Current Members</h3>
                        </div>
                        <div class="card-block">
                            <table>
                                <thead>
                                    <tr>
                                        <th>手机号码</th>
                                        <th>密码</th>
                                        <th>通信mac</th>

                                        <th>+</th>
                                        <th>-</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    {{ range $index, $elem := .map }}

                                    <tr>
                                        <td>{{$elem.Phone}}</td>
                                        <td>{{$elem.PassWord}}</td>
                                        <td>{{$elem.Mac}}</td>
                                        <td>
                                            <a type="" class="" data-toggle="modal" data-target="#addSubModal" data-whatever="{{$elem.Phone}}">
                                                添加子终端</a>
                                        </td>
                                        <td>
                                            <a href="/admin/op/del.html?id={{$elem.ID}}"> 删除 </a>
                                        </td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </div>


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">添加新结点</h4>
                </div>
                <div class="modal-body">
                    <form action="/admin/op/addnew" method="post">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">手机号码:</label>
                            <input type="text" class="form-control" id="addNewPhone" value="13123456789">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">密码:</label>
                            <input class="form-control" id="addNewPasswd">
                        </div>

                        <div class="form-group">
                            <label for="sub-mac" class="control-label">结点编号:</label>
                            <input type="text" class="form-control" id="addNewMac" value="00124B001795E329">
                        </div>
                        <input type="button" class="btn btn-primary btn-block" style=" background-color: deepskyblue!important; border: none;" value="添加"
                            id="btnAddNew">
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{/*为用户新添加子结点*/}}
    <div class="modal fade" id="addSubModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">添加子结点</h4>
                </div>
                <div class="modal-body">
                    <form action="/admin/op/addsub" method="post">
                        <div class="form-group">
                            <label for="location" class="control-label">位置</label>
                            <input type="text" maxlength="15" name="location" class="form-control" id="location">
                        </div>
                        <input type="hidden" name="phone" id="phone" class="phone">
                        <div class="form-group">
                            <label for="subMac" class="control-label">结点编号:</label>
                            <input type="text" class="form-control" name="subMac" maxlength="30" id="subMac">
                        </div>
                        <input type="button" id="addsub" class="btn btn-primary btn-block" style=" background-color: deepskyblue!important; border: none;"
                            value="添加">
                    </form>
                </div>

            </div>
        </div>
    </div>

</body>


<script>

    const rexgPhone = new RegExp(/^1[34578]\d{9}$/);
    const rexgMac = new RegExp(/[A-Fa-f0-9]{16}/);

    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes

    });

    // 新添加用户
    $("#btnAddNew").on("click", function () {

        console.log("btnAddNew");
        var phone = $("#addNewPhone").val();
        var passwd = $("#addNewPasswd").val();
        var mac = $("#addNewMac").val();

        let data = JSON.stringify({ 'phone': phone, "passwd": passwd, "mac": mac });

        console.log("data " + data);
        // 手机号码校验失败
        if (!rexgPhone.test(phone)) {
            alert("手机号码不正确");
            return false;
        }


        if (!rexgMac.test(mac)) {

            alert("mac 通信地址不正确......");
            return false;
        }

        $.post("/admin/op/addnew", data, function (data) {
            // let resp = JSON.stringify(data);
            let resp = JSON.parse(JSON.stringify(data))
            console.log("resp " + resp)

            if (resp.code === 200) {
                // 关闭 
                $("#exampleModal").close();
            } else if (resp.code === 400) {
                alert("error " + resp.message);
            }
        });
    });

    // 添加子节点......
    $("#addsub").on("click", function () {
        console.log("ddsdsd")
        let phone = $("#phone").val();
        let mac = $("#subMac").val();
        let location = $("#location").val();
         let data = JSON.stringify({ 'phone': phone, 'location': location, "mac": mac });
        console.log("data " + data);

         // 手机号码校验失败
        if (!rexgPhone.test(phone)) {
            alert("手机号码不正确");
            return false;
        }


        if (!rexgMac.test(mac)) {

            alert("mac 通信地址不正确......");
            return false;
        }

       
        $.post('/admin/op/addsub', data, function (data) {
          let resp = JSON.parse(JSON.stringify(data))
            console.log("resp " + resp)

            if (resp.code === 200) {
                // 关闭 
               
            } else if (resp.code === 400) {
                alert("error " + resp.message);
            }
        });
    });

    $('#addSubModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('将结点添加到用户: ' + recipient)
        modal.find("#phone").val(recipient);
        console.log(modal.find("#phone").val())
        // modal.find('.modal-body input').val(recipient)

    });
</script>

</html>